<template>
	<div class="wrap">
		<el-form ref="form" :inline="true" size="small" :model="forms" class="form" label-width="100px">
			<el-form-item label="赞助商名称" prop="spon_name">
				<el-input
					v-model="forms.spon_name"
					placeholder="请输入赞助商名称"
					clearable
					style="width: 200px"
				/>
			</el-form-item>
			<el-form-item label="手机号" prop="contact_tel">
				<el-input
					v-model="forms.contact_tel"
					placeholder="请输入手机号"
					clearable
					style="width: 200px"
				/>
			</el-form-item>
			<p class="line">
				<el-button icon="el-icon-search" type="primary" size="small" @click="loadData">
					搜索
				</el-button>
			</p>
		</el-form>
		<div class="answer-bot">
			<el-row style="margin-bottom: 15px">
				<div class="button">
					<el-button type="primary" size="small" plain @click="$refs.details.initData('新增')">
						添加赞助商
					</el-button>
				</div>
			</el-row>
			<el-table
				stripe
				border
				size="small"
				:data="tableData"
				:resizable="false"
				highlight-current-row
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
			>
				<el-table-column
					label="赞助商名称"
					min-width="150px"
					show-overflow-tooltip
					:formatter="row => row.spon_name || '--'"
				/>
				<el-table-column
					label="用户名"
					min-width="150px"
					show-overflow-tooltip
					:formatter="row => row.user_name || '--'"
				/>
				<el-table-column
					label="手机号"
					min-width="120px"
					show-overflow-tooltip
					:formatter="row => row.contact_tel || '--'"
				/>
				<el-table-column
					label="联系人姓名"
					min-width="120px"
					show-overflow-tooltip
					:formatter="row => row.contact_name || '--'"
				/>
				<el-table-column
					label="创建时间"
					min-width="150px"
					show-overflow-tooltip
					:formatter="row => row.add_time || '--'"
				/>
				<el-table-column
					label="赞助比赛场次"
					min-width="150px"
					show-overflow-tooltip
					:formatter="row => row.race_num || 0"
				/>

				<el-table-column label="操作" width="250px" fixed="right">
					<template scope="{$index, row}">
						<el-link class="btn-blue" :underline="false" @click="onChangeStatus(row, $index)">
							{{ row.is_close == 1 ? '启用' : '停用' }}
						</el-link>
						<el-link
							class="btn-blue"
							:underline="false"
							@click="$refs.details.initData('编辑', row)"
						>
							编辑
						</el-link>
						<el-link class="btn-blue" :underline="false" @click="$refs.relation.initData(row)">
							关联赛事
						</el-link>
						<el-link
							class="btn-blue"
							:underline="false"
							@click="
								$router.push({
									path: '/sponsor/send',
									query: { id: row.spon_id, name: row.spon_name }
								})
							"
						>
							赠送名额
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="forms.page_no"
						:limit.sync="forms.page_size"
						scroll-el="el-main"
						@pagination="pageChange"
					/>
				</el-col>
			</el-row>
		</div>
		<!-- 创建赞助商 -->
		<Add ref="details" />
		<relationRace ref="relation" />
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import Add from './components/add.vue'
	import RelationRace from './components/relationRace.vue'
	import Pagination from '@/components/Pagination'
	import { sponsorList, deleteArticle, changeSponsor } from '@/api/user-manager.js'

	export default {
		name: 'SponsorList',
		components: { Pagination, Add, RelationRace },
		data() {
			return {
				forms: {
					spon_name: '',
					contact_tel: '',
					page_no: 1,
					page_size: 10
				},
				total: 0,
				tableData: [] // table数据
			}
		},
		computed: {
			...mapGetters(['userid'])
		},
		activated() {
			this.loadData()
		},
		created() {
			this.loadData()
		},
		methods: {
			// 搜索
			searchData() {
				this.forms.page_no = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.forms.page_no = page
				this.forms.page_size = limit
				this.loadData()
			},
			async loadData() {
				const loading = this.$setLoading()
				sponsorList(this.forms).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			openAnswer(type, row) {
				this.$router.push({ path: '/news/create', query: { id: row && row.article_id } })
			},
			onDelete(row, index) {
				this.$confirm('确定要删除当前新闻吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(async () => {
						const res = await deleteArticle({
							article_id: row.article_id
						})
						this.$message.success('删除成功！')
						this.tableData.splice(index, 1)
					})
					.catch(() => {})
			},
			// 上下架
			onChangeStatus(row, index) {
				this.$confirm(`确定要删除${row.is_close == 1 ? '启用' : '停用'}当前赞助商吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(async () => {
						const res = await changeSponsor({
							spon_id: row.spon_id,
							is_close: row.is_close == 1 ? 0 : 1
						})
						this.$message.success('操作成功！')
						this.loadData()
					})
					.catch(() => {})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.data-desc {
		margin: 0 10px;
	}
	.copy {
		cursor: pointer;
	}
	.form {
		background: #ffffff;
		padding: 24px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}

	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
	.btn-blue {
		color: #3674ff;
		font-size: 13px;
		cursor: pointer;
		margin: 0 5px;
	}
	.a_txt:hover {
		color: #3674ff;
		text-decoration: underline;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	::v-deep {
		.pagination {
			text-align: right;
			padding: 0 16px 8px;
		}
	}
</style>
